<template>
  <div class="operate-chat-room" id="operate-chat-room" @click="handleClick">
    <div class="content" v-loading="loading">
      <h1 class="title">我的聊天室列表{{ imageStore.categorySharing.categoryName }}</h1>
      <el-icon @click="close"><Close /></el-icon>
      <el-scrollbar >
        <div class="chat-room-list">
          <div 
            class="chat-room-item  item-in" 
            :class="{'item-out': chatRoom.outAnimate}"
            v-for="chatRoom in chatRooms" 
            :key="chatRoom.id"
          >
            <el-tooltip
              class="box-item"
              effect="light"
              :content="`创建于${formatTime(chatRoom.createTime)}`"
              placement="left-start"
            >
              <span class="name-span">{{ chatRoom.name }}</span>
            </el-tooltip>
            <div class="link-operate">
              <el-button type="primary" @click="copy(chatRoom.id)">复制聊天室id</el-button>
              <el-popconfirm title="确认删除？" @confirm="rmChatRoom(chatRoom)">
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm> 
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="new-chat-room">
        <el-input
          show-word-limit
          type="text"
          placeholder="请输入要创建的聊天室名称"
          v-model="chatRoomName"
          :maxlength="10"
        />
        <el-button type="success" @click="doCreateChatRoom">生成新的聊天室</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useImageStore } from '../../store/image';
import { useChatRoomStore } from '../../store/chatRoom';
import { formatTime } from '../../util/chore';
import { ChatRoom } from '../../type/entity'
import { copyText } from '../../util/chore';
import { storeToRefs } from 'pinia';
import { createChatRoom, getChatRooms, removeChatRoom } from '../../request/chatRoom';
const chatRoomStore = useChatRoomStore()
const imageStore = useImageStore()
const chatRoomName = ref('')
const loading = ref(false)
const { chatRoomOperating, chatRooms} = storeToRefs(chatRoomStore)
getChatRooms().then(
  res => {
    chatRoomStore.setChatRooms(res.data)
  },
)
function close(){
  chatRoomOperating.value = false
}
function doCreateChatRoom(){
  if(chatRoomName.value == ''){
    ElMessage({type:'warning', message:'聊天室名称不能为空'})
    return 
  }
  loading.value = true
  createChatRoom(chatRoomName.value).then(
    res => {
      chatRooms.value.push(res.data)
      loading.value = false
      chatRoomName.value = ''
      ElMessage({type: 'success', message: '创建成功'})
    },
    err => {
      loading.value = false
    }
  )
  
}
function rmChatRoom(chatRoom:ChatRoom){
  loading.value = true
  removeChatRoom(chatRoom.id).then(
    val => {
      if(val.data.success){
        ElMessage({type:'success', message:'删除成功'})
        chatRoom.outAnimate = true
        setTimeout(() => {
          chatRoomStore.rmChatRoom(chatRoom.id)
        }, 1000);
      }
      else {
        ElMessage({type:'error', message:'删除失败'})
      }
      loading.value = false
    }
  ).catch(
    err => { loading.value = false }
  )
}
function copy(str:string){
  copyText(str).then(
    val => { ElMessage({type: 'success', message: '复制成功'}) },
    err => { ElMessage({type: 'error', message: '出错了'}) }
  )
}
function handleClick(e:any){
  if(e.target.id === 'operate-chat-room'){
    close()
  }
}
</script>

<style scoped>

</style>